<template>
  <div>
    <div class="header">
        <img v-bind:src="[header+info.data.logo]">
        <router-link :to="{name:'AboutUs'}">关于我们</router-link>
        <router-link to="/introduction">公司简介</router-link>
        <router-link to="#" class="active">首页</router-link>
    </div>
    <template>
      <yd-slider autoplay="3000">
        <yd-slider-item v-for='(image,index) in info.data.banner' :key='index'>
            <img :src="['https://sy.mujiwulian.net/sy/'+image]">
        </yd-slider-item>
      </yd-slider>
    </template>
    <div>
      <img class="headerImg" src="../assets/新闻资讯@2x.png"/>
      <div>
        <yd-flexbox v-for="n in info.data.news">
          <div>
            <img class="img_01" v-bind:src="[header+n.newsImgPath]" alt="未找到该图片">
          </div>
          <yd-flexbox-item class="newItem">
            <div class="newItemHeader">
              <strong><span>{{n.newsTitles}}</span></strong>
            </div>
            <div class="zt_01">
              <p>{{n.newsAbs}}<strong><a v-bind:href="[detail+'&id='+n.id]">[详细]</a></strong></p>
              <p class="data_01">{{dateFormat(n.newsAddTime)}}</p>
            </div>
            <hr/>
          </yd-flexbox-item>
        </yd-flexbox>
        <div>
          <yd-button id="findMoreNews" bgcolor="#39ccbe" type="primary" style="float: right;">
            <router-link id="more" to="/newsIndex">查看更多</router-link>
          </yd-button>
        </div>
      </div>
    </div>

    <!--产品中心-->
    <div class="products">
      <img class="headerImg" src="../assets/产品展示@2x.png"/>
      <yd-grids-group :rows="3">
        <!--:href="[productDetail+'&id='+p.id]" type="a"-->
        <yd-grids-item v-for="p in info.data.product">
            <div slot="else" style="text-align: center;" >
              <router-link :to="{name:'ProductDetail',params:{id:p.id}}">
                <img class="mainProduct" v-bind:src="[header+p.productImgPathHead]">
              <strong><p>{{p.productName}}</p></strong>
              </router-link>
            </div>
        </yd-grids-item>
      </yd-grids-group>
    </div>

    <div id="activity">
      <img id="huodong" src="../assets/活动@2x.png">
    <yd-slider autoplay="3000">
      <yd-slider-item v-for="a in info.data.activity">
        <a v-bind:href="[productDetail+'&id='+a.id]">
          <img v-bind:src="header+a.productImgPathHead" alt=""/>
        </a>
      </yd-slider-item>
    </yd-slider>
    </div>
    <div>
      <a id="shop">进入商城查看更多</a>
    </div>
  </div>
</template>

<script>

  import company from "../store/companys";

  export default {
    name: "Nav",
    data() {
        return {
          header:"https://sy.mujiwulian.net/sy/",
          getMore:"https://sy.mujiwulian.net/sy/html/新闻1.html?sy="+company.sy,
          detail:"https://sy.mujiwulian.net/sy/html/新闻.html?sy="+company.sy,
          productDetail:"https://sy.mujiwulian.net/sy/html/产品中心.html?sy="+company.sy,
          company:{
            sy:null,
          },
          info:{
            code: null,
            msg: null,
            data: {
              logo:"",
              banner: [],
              news: [
                {
                  id: null,
                  newsTitles: "",
                  newsImgPath: "",
                  newsAbs: "",
                  nwesAddTime: ""
                }
              ],
              product: [{
                id: null,
                productName: "",
                productImgPathHead: ""
              }
              ],
              activity: [{
                id: 1,
                productImgPathHead: ""
              }]
            }
          }
        }
      },
      methods:{//   时间格式化
        getQueryString:function(name) {
          let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
          let r = window.location.hash.substr(8).match(reg);
          if (r != null) return unescape(r[2]);
          return null;
        },
        dateFormat:function(time) {
          let date=new Date(time);
          let year=date.getFullYear();
          /* 在日期格式中，月份是从0开始的，因此要加0
           * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
           * */
          let month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
          let day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
          let hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
          let minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
          let seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
          // 拼接
          return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
        },
      },
      mounted() {
        this.company.sy=this.getQueryString("sy");
        if(this.company.sy==null){
          this.company.sy=this.$store.getters.getUser.sy;
          if(this.company.sy==null){
            alert("抱歉，出错了，未成保存公司sy，请返回公众号重试！");
          }
        }
        this.$axios
          .get("https://sy.mujiwulian.net/sy/website/?sy="+this.company.sy)
          .then(response=>(this.info=response.data));
        //保存sessionStorage
        this.$store.dispatch("asyncUpdateUser",this.company);
      }
    }
</script>

<style scoped>
  *{
    margin: 0px;
    padding: 0px;
  }
  .header{
    height: 50px;
    background-color: #194b6a;
    color: aliceblue;
  }
  .header a{
    height: 100%;
    font-size: 10px;
    float: right;
    display:block;
    width: 55px;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    line-height: 50px; /* 设置垂直居中 */
  }
  .active{
    background-color: #39ccbe;
  }
  a:hover{
    background-color: #39ccbe;
  }
  .headerImg{
    display: block;
    margin: 30px auto;
  }
  /*新闻*/
  .img_01{
    width: 120px;
    height: 80px;
  }
  .newItemHeader{
    text-align: center;
    margin-bottom: 10px;
  }
  .newItem a{
    color:#0066cc;
  }
  .newItem p{
    margin-top: 10px;
  }
  #findMoreNews{
    width: 60px;
    height: 25px;
    color:#0066cc;
    text-align: center;
  }
  .header img{
    margin-top: 7.5px;
    margin-left: 10px;
    height: 35px;
    width: 35px;
  }
  /*产品配置*/
  .mainProduct{
    width: 100%;
    height: 100%;
  }
  .products a:visited{
    background-color: #ffffff;
  }
  #activity{
    margin-top: 36px;
  }
  #activity img{
    max-height: 180px;
  }
  #huodong{
    float: right;
    width: 35px;
    height: 60px;
    position: relative;
    margin-right: 20px;
    margin-bottom: -30px;
    z-index: 9999;
  }
  #shop{
    display: block;
    text-decoration: none;
    text-align: center;
    font-size: 15px;
    background-color:rgb(57,203,190);
    color: white;
    margin-top: 30px;
    margin-left: 30%;
    margin-right: 30%;
    margin-bottom: 20px;
  }
</style>
